<script setup></script>

<template>
  <div class="app-container">
    <!-- 标题和欢迎消息 -->
    <header>
      <h1>{{ appTitle }}</h1>
      <p v-if="userName">欢迎回来，{{ userName }}！</p>
      <p v-else>请输入你的名字</p>
    </header>

    <!-- 用户名输入 -->
    <div class="user-input">
      <input 
        type="text" 
        v-model="userName" 
        placeholder="输入你的名字"
        @keyup.enter="greetUser"
      >
      <button @click="greetUser">确认</button>
    </div>

    <!-- 任务列表示例 -->
    <div class="task-section">
      <h2>简单任务列表</h2>
      <input 
        type="text" 
        v-model="newTask" 
        placeholder="添加新任务"
        @keyup.enter="addTask"
      >
      <button @click="addTask">添加</button>

      <ul v-if="tasks.length > 0">
        <li v-for="(task, index) in tasks" :key="index">
          {{ task }}
          <button @click="removeTask(index)">删除</button>
        </li>
      </ul>
      <p v-else>暂无任务，添加一个吧！</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 响应式数据
const appTitle = ref('我的第一个Vue组件');
const userName = ref('');
const newTask = ref('');
const tasks = ref([]);

// 方法
const greetUser = () => {
  if (userName.value) {
    alert(`你好，${userName.value}！`);
  } else {
    alert('请输入你的名字哦~');
  }
};

const addTask = () => {
  if (newTask.value.trim()) {
    tasks.value.push(newTask.value.trim());
    newTask.value = ''; // 清空输入框
  }
};

const removeTask = (index) => {
  tasks.value.splice(index, 1);
};
</script>

<style scoped>
.app-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

header {
  text-align: center;
  margin-bottom: 30px;
}

.user-input, .task-section {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

input {
  padding: 8px;
  margin-right: 10px;
  width: 70%;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 8px 15px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #359e75;
}

ul {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

li {
  padding: 8px;
  margin: 5px 0;
  background-color: #f5f5f5;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
}

li button {
  background-color: #ff4444;
  padding: 4px 8px;
}

li button:hover {
  background-color: #cc0000;
}
</style>

<style scoped></style>
